<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>找回密码</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/blog_login.css">

    <!--     加载 static底下的 favicon.ico 图标-->
    <link rel="shortcut icon" href="/favicon.ico"/>
    <link rel="bookmark" href="/favicon.ico"/>

</head>
<body>
<!-- 导航栏 -->
<div class="nav">

    <!-- <img src="image/img1.jpg" alt="加载失败" > -->
    <img src="image/img1.jpg" alt="图片加载失败">
    <span class="title">筱的博客</span>

    <!-- 此标签用于占位 分隔 -->
    <div class="spacer"></div>

    <a href="blog_login.html">用户登录</a>

</div>

<!-- 登录页面容器 整个页面框-->
<!-- 通过此页面框 在其内部设计登录框 可以通过弹性布局让其水平垂直居中 -->
<!-- 如果直接弄登录框 那就得设计外边距等使其水平垂直对齐 -->
<div class="login-container">

    <!-- 登录指示 样式 页面里的登录框-->
    <div class="dialog">
        <h2>找回密码</h2>

        <div class="row">
                <span>
                    <b>QQ邮箱</b>
                </span>
            <!-- placeholder属性 使在框中没有字时默认显示的信息 -->
            <input type="text" id="username" placeholder="输入登录的邮箱地址">
        </div>
        <div class="row">
                <span>
                    <b>新密码</b>
                </span>
            <input type="password" id="password" placeholder="密码最低6位">
        </div>

        <div class="row">
            <span>
                <b>确认密码</b>
            </span>
            <input type="password" id="judgepassword" placeholder="输入确认密码">
        </div>

        <div class="row">
            <span>
                <b>验证码</b>
            </span>


            <input type="text" id="judgetext" placeholder="邮箱验证码">

            <!--            <img id="captchaimg" src="/home/captcha" style="cursor: pointer" title="验证码看不清？ 单击一下试试~">-->
            <button id="send">获取邮箱验证码</button>

        </div>
        <!-- 这里存放错误信息 -->
        <div class="error">

        </div>


        <div class="row">
            <!-- 换成submit提交标签按钮 -->
            <!-- <a id="submit" href ="blog_list.html">登录</a> -->
            <button id="submit">重置密码</button>
        </div>

        </form>

        <div class="mes">
            <div class="show">还没有账号?</div>
            <div class="attention">
                点击这里去注册
            </div>
        </div>
    </div>

</div>

<!--<script src="../../../../../captcha/src/main/resources/static/jquery.js"></script>-->
<script src="js/jquery.js"></script>
<script>
    let username =document.querySelector('#username');
    let password = document.querySelector('#password');
    let judgepassword = document.querySelector('#judgepassword');
    let judgetext = document.querySelector('#judgetext');
    let error = document.querySelector('.error');
    let button = document.querySelector('#submit');
    error.innerHTML = '';

    let attention = document.querySelector('.attention');
    attention.onclick = function () {
        location.assign("blog_register.html");
    }

    button.onclick = function () {
        if (
            username.value == '') {
            username.focus();
            error.innerHTML = 'QQ邮箱不能为空!';
        } else if (password.value == '') {
            password.focus();
            error.innerHTML = '密码不能为空!';
        } else if (judgetext.value == '') {
            judgetext.focus();
            error.innerHTML = '验证码不能为空!';
        } else if(judgetext.value.length!=6){
            judgetext.focus();
            error.innerHTML = '验证码错误!';
        } else if(judgepassword.value == '') {
            judgepassword.focus();
            error.innerHTML = '确认密码不能为空'
        } else {
            let user = {
                "email": username.value,
                "password": password.value,
                "captcha": judgetext.value
                // "loginTime" : new Date()  日期由后端设置
            };
            button.className="forbid";
            error.innerHTML ='请稍等, 密码正在重置中...';

            $.ajax({
                url: 'user/reset',
                type: 'post',
                data: user,
                success: function (body) {
                    if (body != null && body.code == 200) {
                        alert('密码重置成功!')
                        location.assign("blog_login.html");
                    } else {
                        error.innerHTML = body.msg;
                    }
                    button.className="allow";
                }
            });
        }
    }
    let send_captcha=document.querySelector("#send");
    send_captcha.onclick= function (){
        if (username.value.length < 12) {
            error.innerHTML = "非法邮箱地址!";
            return;
        }
        //  取消单击事件
        send_captcha.className="forbid";
        error.innerHTML = "正在尝试发送验证码给您邮件,请耐心等待...";
        $.ajax({
            url: "user/sendcaptcha",
            type: "post",
            data: {
                "eMail":username.value
            },
            success: function (body){
                //  恢复单击事件
                send_captcha.className="allow";
                error.innerHTML = body.msg;
            }
        });
    }


    // 键盘单击事件
    window.onkeydown=function(ev){
        if(ev.keyCode==13){  // 当单击了回车按键  执行下面逻辑 跳转到 没有填写数据的框, 全部填写后 执行登录请求
            if(username.value==''){
                username.focus();
            }
            if(username.value !=''&&password.value ==''){
                password.focus();
            }
            if(password.value!=''&&password.value!=''&&judgepassword.value==''){
                judgepassword.focus();
            }
            if(password.value!=''&&password.value!=''&&judgepassword.value!=''&&judgetext.value==''){
                judgetext.focus();
            }

            if(password.value!=''&&password.value!=''&&judgepassword.value!=''&&judgetext.value!=''){
                button.onclick();
            }
        }


    }



</script>
</body>
</html>